<template>
  <div class="">
    <div class="aa-container" id="jobapp" v-if="isVip">
      <div class="aa-btns">
        <el-button type="success" icon="el-icon-plus" style="font-size: 14px;padding: 8px;" @click="add()">新增申请</el-button>
        <el-button type="success" icon="el-icon-upload2" style="font-size: 14px;padding: 8px;" @click="submitAll()">上报申请</el-button>
      </div>
      <el-tabs @tab-click="all">
        <el-tab-pane label="全部" ></el-tab-pane>
        <el-tab-pane label="未提交"></el-tab-pane>
        <el-tab-pane label="待审核"></el-tab-pane>
        <el-tab-pane label="已通过"></el-tab-pane>
        <el-tab-pane label="未通过"></el-tab-pane>
      </el-tabs>
      <award-list ref="list" :offset.sync="offset" :limit.sync="limit" :sort.sync="sort" :order.sync="order"
      :data="data" :total="total" @selected="selected"></award-list>
    </div>
    <div class="flex-column-center promp-msg" style="height: 500px;" v-if="!isVip">
      <img src="static/gongnengtishi.png" alt="">
      <h2>无操作权限</h2>
      <span v-if="noVipStatus === 'NOVIP'">很抱歉！只有会员才可进行此操作，请先申请为会员！</span>
      <span v-if="noVipStatus === 'DISABLED'">会员已被禁用，暂时无法进行相关操作</span>
      <span v-if="noVipStatus === 'WAIT'">会员为待缴费状态，请及时缴费</span>
    </div>
  </div>
</template>

<script>
import AwardList from './awardapp/AwardList'
import axios from 'axios'
import eventBus from '../plugins/eventbus.js';

  export default {
    title: '优秀工程奖申请',
    name: 'award-app',
    data () {
      return {
        offset: 1,
        limit: 10,
        sort: '',
        order: '',
        currentPage: 1,
        data: [],
        total: 0,
        index: 0
      }
    },
    mounted () {
      this.all({index: this.index})
      if (!this.isVip) {
        this.getUserType()
      }
      this.activated()
    },
    methods: {
      add () {
        this.$router.push({path: '/awardform'})
      },
      all(tabvm) {
        this.index = tabvm.index
        try {
          this.index = tabvm.index
          let obj = {
            offset: (this.offset-1) * this.limit,
            limit: this.limit,
            sort: this.sort,
            order: this.order,
            userId: this.$store.state.user.user.user.userId
          }
          if (tabvm.index === '0') { // 全部
            obj.status = ''
          } else if (tabvm.index === '1') { // 未提交
            obj.status = 'SAVE'
          } else if (tabvm.index === '2') { // 待审核
            obj.status = 'WAIT '
          } else if (tabvm.index === '3') { // 已通过
            obj.status = 'SUCCESS'
          } else if (tabvm.index === '4') { // 未通过
            obj.status = 'FAIL'
          }
          this.getData(obj)
        } catch (e) {
          this.$message.error(`提取数据出错，${e}`)
        }
      },
      getData (params) {
        axios.post('/mscs/award/findMscsEngineeringAwardApply', this.$paramsConvert(params)).then((res) => {
          this.data = res.data.data.data
          this.total = res.data.data.count
        }).catch((error) => {
          this.$catchError(error)
        })
      },
      // 选择某一行
      selected (row) {
        this.$router.push({name: 'awardform', params: row})
      },
      // 保存完成后刷新使用
      activated(){
          //根据key名获取传递回来的参数，data就是map
          eventBus.$on('award-confirm-success', function(data){
            this.all({index: 0})
          }.bind(this));
      },
      submitAll () {
        axios.post('/mscs/award/batchApply', this.$paramsConvert({userId: this.$store.state.user.user.user.userId})).then((res) => {
          if (res.data.code === 1) {
            if (parseInt(res.data.data) === 0) {
              this.$message({
                showClose: true,
                message: '无待上报数据',
                type: 'warning'
              })
            } else {
              this.$message({
                showClose: true,
                message: '提交成功',
                type: 'success'
              })
            }

            this.all({index: 0})
          } else {

            this.$message({
              showClose: true,
              message: `${res.data.data[0].errorMsg}`,
              type: 'error'
            })
          }

        }).catch((error) => {
          this.$catchError(error)
        })
      },
      getUserType () {
        axios.post('/mscs/user/findUserType', this.$paramsConvert({userId: this.$store.state.user.user.user.userId})).then((res) => {
          if (res.data.code === 1) {
            this.$store.commit('upUserType', {userType: res.data.data.userType})
          }
        })
      }
    },
    computed: {
      isVip () {
        return this.$store.state.user.user &&
        (this.$store.state.user.user.user.userType === 'MEMBER' || this.$store.state.user.user.user.userType === 'CMEMBER') &&
        this.$store.state.user.user.memberStatus === "NORMAL" &&
        this.$store.state.user.user.paymentStatus === "ALREADY"
      },
      noVipStatus () {
        if (!(this.$store.state.user.user && (this.$store.state.user.user.user.userType === 'MEMBER' || this.$store.state.user.user.user.userType === 'CMEMBER'))) {
          return 'NOVIP'
        }
        if (!(this.$store.state.user.user.memberStatus === "NORMAL")) {
          return 'DISABLED'
        }
        if (!(this.$store.state.user.user.paymentStatus === "ALREADY")) {
          return 'WAIT'
        }
      },
    },
    watch: {
      'offset' (val) {
        this.all({index: this.index})
      },
      'limit' (val) {
        this.all({index: this.index})
      }
    },
    components: {
     'award-list': AwardList
   },
  }
</script>
<style>
  .aa-container {
    padding-top: 25px;
    position: relative;
  }
  .aa-container .el-tabs__header {
    margin: 0;
  }
  .aa-container .el-tabs__nav-wrap::after {
    background-color: #94C05A;
    height: 1px;
  }
  .aa-container .el-tabs__item{
    font-size: 16px;
    width: 100px;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
  }
  .aa-container .el-tabs__active-bar {
    height: 0;
    background-color: #94C05A;
    border-bottom: 0px solid transparent;
    width: 100px;
  }
  .aa-container .el-tabs__item.is-active {
    color: #94C05A;
    border-bottom: 3px solid #94C05A;
  }
  .aa-container .el-table th {
    background-color: #E4EED8;
    color: #666666;
  }
  .aa-container .el-table td, .el-table th.is-leaf {
    border-bottom: 1px solid #E0E6D8;
  }
  .aa-container .el-table_4_column_28 {
    border-left: 3px solid transparent;
  }
  .aa-container .current-row {
    box-shadow:  0px 0px 20px #94C05A;
  }
  .aa-container .el-table__row td {
    background-color: #F3F9EB;
  }
  .aa-container .current-row .el-table_4_column_28 {
    border-left: 3px solid #94C05A;
  }
  .aa-container .el-table--enable-row-hover .el-table__body tr:hover {
    box-shadow:  0px 0px 20px #94C05A;
  }
  .aa-container .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #FFFFFF;
  }
  .aa-container .aa-btns {
    z-index: 1;
    position: absolute;
    right: 0;
    /* top: 0; */
  }

  </style>
